<template>
  <el-dialog v-model="visible" destroy-on-close @closed="onClosed">
    <span>入参:{{ props.name }}</span>
    <el-input v-model="inputName"></el-input>
    <el-button @click="okClick"> 确定 </el-button>
    <el-button @click="cancelClick"> 取消 </el-button>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onUnmounted, ref } from 'vue'

type IProp = {
  name: string | undefined
}

const props = defineProps<IProp>()
const inputName = ref<string>()

const visible = ref(true)
const emit = defineEmits(['ok', 'cancel'])

const onClosed = () => {
  console.log('closed in dialog')
}

const okClick = () => {
  emit('ok', `${props.name}, ${inputName.value}`)
  visible.value = false
}

const cancelClick = () => {
  emit('cancel')
  visible.value = false
}

onUnmounted(() => {
  console.log('unmounted in dialog')
})
</script>
